import React from 'react';
// import { connect } from '../utils/connect';

import { connect } from 'react-redux';

import {
    decAction,
    subAction
} from '../store/counter/actionCreators'

function About(props) {

        return (
            <div>
                <h1>Home</h1>
                <h2>当前计数: {props.counter}</h2>
                <button onClick={e => props.decrement()}>-1</button>
                <button onClick={e => props.subNumber(5)}>-5</button>
                <ul>
                    <li>
                        {
                            props.banners.map((item, index) => {
                                return <li key={item.acm}>{item.title}</li>
                            })
                        }
                    </li>
                </ul>
                <ul>
                    <li>
                        {
                            props.recommends.map((item, index) => {
                                return <li key={item.acm}>{item.title}</li>
                            })
                        }
                    </li>
                </ul>
            </div>
        )
    
}

const mapStateToProps = state => {
    return {
        counter: state.counterInfo.counter,
        banners: state.homeInfo.banners,
        recommends: state.homeInfo.recommends 

    }
};

const mapDispatchToProps = dispatch => {
    return {
        decrement: function() {
            dispatch(decAction())
        },
        subNumber: function(num) {
            dispatch(subAction(num))
        }
    }
};

export default connect(mapStateToProps, mapDispatchToProps)(About);